<template>
	<view class="billing">
		<view class="card_body">
			<view class="card_top">
				<view class="card_item" @click="navTo('/pages/business/selectCustom', 'redirectTo')">
					<image src="../../static/images/XZKH@2x.png"></image>
					<text>选择客户</text>
				</view>
				<view class="card_item" @click="scan_car">
					<image src="../../static/images/CPSB@2x.png"></image>
					<text>车辆识别</text>
				</view>
			</view>
			<view class="title">
				<text class="titles">填入车牌号</text>
				<text @click="clear" v-if="defaultNum">清空</text>
			</view>
			<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			<view style="height: 64rpx;"></view>
			<i-buttons :disabled="disabled" padding="18rpx 0" radius="4" size="32" color="#fff" @click="toBil"
				bgColor="#FB652E">确认</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onUnload
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, insertStr, getAppQX } from '../../utils/common';
	import { detailByVno } from '../../api/index';


	const defaultNum = ref('')
	const disabled = ref(true)

	const store = useStore()
	const clear = () => {
		defaultNum.value = ''
		disabled.value = true
	}

	const numberInputResult = (e : string) => {
		defaultNum.value = e
		disabled.value = e.replace(/\s+/g, '').length < 8
	}

	const scan_car = () => {
		// #ifdef  APP-PLUS
		navTo('/pages/views/scanCar', 'navigateTo')
		// #endif
		// #ifdef  MP-WEIXIN
		if (!getAppQX('cameraAuthorized')) {
			return
		}
		navTo('/pages/views/wxScan_car', 'navigateTo')
		// #endif
		uni.$on('changeVno', (data) => {
			defaultNum.value = insertStr(data.vno, 2, '·')
			disabled.value = data.vno.length < 7
			setTimeout(() => {
				uni.$off('changeVno')
			}, 1000)
		})
	}

	const toBil = () => {
		const carVno = defaultNum.value.replace(/\s+/g, '').replace(/\·/g, '')
		getDetailByVno(carVno)
	}

	const getDetailByVno = async (vno : string) => {
		const { data } = await detailByVno({ vno })
		if (data) {
			navTo(`/pages/business/goBilling?vno=${data.vno}&userName=${data.userName}&mobile=${data.mobile || ''}&customerType=${data.customerType}`, 'redirectTo')
		} else {
			navTo(`/pages/business/goBilling?vno=${vno}`, 'redirectTo')
		}
	}
</script>

<style lang="scss" scoped>
	.billing {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.card_body {
			width: calc(100% - 128rpx);
			margin: 0 auto;
		}

		.card_top {
			margin: 40rpx 0;
			@include flexRS;

			.card_item {
				width: 48%;
				height: 236rpx;
				border-radius: 24rpx;
				background: $background-color;
				@include flexCC;

				image {
					margin-bottom: 24rpx;
					width: 88rpx;
					height: 88rpx;
				}

				text {
					@include titlefont(32rpx);
				}
			}

			.card_item:active {
				background: #efefef;
			}


		}

		.title {
			@include flexRS;
			width: 100%;
			@include dfont(26rpx);
			color: #A0A0AD;
			margin-bottom: 40rpx;

			.titles {
				@include titlefont(32rpx);
			}
		}
	}
</style>